<template>
  <!-- 科学家页面的知识图谱 -->
  <ECharts class="chart" :option="option" autoresize />
</template>

<script setup>
import { color } from "echarts";
import { info } from "sass";
import { ref } from "vue"; // 导入Vue响应式API

const colorAll = ref([
  "#D7AFAD",
  "#D3DFED",
  "#E5CDDD",
  "#C7BED3",
  "#E4E1C2",
  "#738BAD",
  "#85A397",
  "#E1B882",
  "#D9A89A",
  "#B67271",
  "#B1C6E1",
  "#D2A1BF",
  "#9D8DB2",
]);
// ================== 配置数据 ==================
/**
 * 层级配置数组
 * 每个对象代表一个同心圆层级的配置
 * @type {Array<{
 *  radius: number,
 *  names: string[],
 *  colorBase: number,
 *  radiusOffset: number
 * }>}
 */
const layerConfigs = [
  {
    // 第一层配置
    radius: 100, // 基础半径80px
    names: [
      {
        name: "张衡",
        info: "东汉天文学家，发明地动仪、浑天仪，著《灵宪》阐述宇宙理论",
      },
      {
        name: "祖冲之",
        info: "南朝数学家，首次将圆周率精确到第七位，著《缀术》",
      },
      {
        name: "李时珍",
        info: "明代医药学家，耗时27年编成《本草纲目》收录药物1892种",
      },
      {
        name: "沈括",
        info: "北宋科学家，著《梦溪笔谈》记载石油、磁偏角等重要发现",
      },
      { name: "蔡伦", info: "东汉宦官，改进造纸术，创“蔡侯纸”推动文化传播" },
      { name: "毕昇", info: "北宋发明家，活字印刷术首创者，比欧洲早400年" },
    ],
    colorBase: 90, // 颜色基准色相值90度（橙色系）
    radiusOffset: 20, // 半径随机扰动范围±30px
  },
  {
    // 第二层配置
    radius: 180, // 基础半径160px
    names: [
      {
        name: "墨子",
        info: "春秋时期思想家，最早提出小孔成像原理，创立墨家学派",
      },

      {
        name: "甘德",
        info: "战国天文学家，与石申合著《甘石星经》记录800多恒星",
      },
      { name: "石申", info: "战国占星家，编制最古老星表，发现行星逆行现象" },
      { name: "氾胜之", info: "西汉农学家，著《氾胜之书》系统总结耕作原理" },
      {
        name: "贾思勰",
        info: "北魏农学家，著《齐民要术》完整保存古代农业技术",
      },
      { name: "孙思邈", info: "唐代药王，著《千金方》提出医德标准" },
      {
        name: "郭守敬",
        info: "元代天文学家，创制授时历，研制简仪等17种天文仪器",
      },
    ],
    colorBase: 180, // 颜色基准色相180度（青色系）
    radiusOffset: -20, // 半径扰动±40px
  },
  {
    // 第三层配置
    radius: 260, // 基础半径240px
    names: [
      { name: "杜诗", info: "东汉发明家，创制水排（水力鼓风机）早欧洲千年" },
      { name: "马钧", info: "三国机械大师，改进织绫机、发明龙骨水车" },
      {
        name: "裴秀",
        info: "西晋地理学家，创立“制图六体”理论，奠定古代制图基础",
      },
      { name: "郦道元", info: "北魏地理学家，著《水经注》记录1252条河流" },
      { name: "苏颂", info: "北宋天文学家，建造水运仪象台，最早机械钟表雏形" },
      { name: "秦九韶", info: "南宋数学家，创立“大衍求一术”，著《数书九章》" },
      {
        name: "杨辉",
        info: "南宋数学家，发现帕斯卡三角规律，著《详解九章算法》",
      },
      {
        name: "朱载堉",
        info: "明代乐律学家，首创十二平均律理论，影响世界音乐史",
      },
      { name: "宋应星", info: "明末科学家，著《天工开物》收录130多项生产技术" },
      {
        name: "徐光启",
        info: "明代农学家，与利玛窦合译《几何原本》，著《农政全书》",
      },
      { name: "王祯", info: "元代农学家，发明转轮排字盘，著《王祯农书》" },
      {
        name: "李诚",
        info: "北宋建筑家，著《营造法式》古代最完整建筑技术典籍",
      },
      {
        name: "唐顺之",
        info: "明代数学家，首次系统研究珠算算法，著《勾股六术》",
      },
      { name: "赵友钦", info: "元代天文学家，通过实验证明月球盈亏原理" },
      {
        name: "王孝通",
        info: "唐代数学家，著《缉古算经》首创三次方程数值解法",
      },
      {
        name: "徐霞客",
        info: "明代地理学家，经30年考察著60万字《徐霞客游记》",
      },
      { name: "梅文鼎", info: "清代天文学家，会通中西历法，著历算著作86种" },
      { name: "明安图", info: "清代数学家，创“割圆连比例法”研究无穷级数" },
    ],
    colorBase: 270, // 颜色基准色相270度（紫色系）
    radiusOffset: -20, // 半径扰动±50px
  },
  {
    // 第四层配置
    radius: 340, // 基础半径240px
    names: [
      {
        name: "巢元方",
        info: "隋代医学家，著《诸病源候论》首部病因证候学专著",
      },
      {
        name: "王惟一",
        info: "宋代针灸学家，铸造针灸铜人并编《铜人腧穴针灸图经》",
      },
      { name: "吴有性", info: "明末医家，著《温疫论》首创“戾气说”传染病理论" },
      {
        name: "李冶",
        info: "金代数学家，完善天元术（代数方程理论），著《测圆海镜》",
      },
      {
        name: "汪昂",
        info: "清代医学家，编《本草备要》《汤头歌诀》普及医药知识",
      },
      {
        name: "张仲景",
        info: "东汉医圣，著《伤寒杂病论》确立中医辨证论治体系",
      },
      { name: "华佗", info: "东汉外科鼻祖，发明麻沸散，创五禽戏养生法" },
      { name: "皇甫谧", info: "西晋医学家，著《针灸甲乙经》首部针灸学专著" },
      { name: "葛洪", info: "东晋炼丹家，著《肘后备急方》记载青蒿治疟疾方法" },
      {
        name: "陶弘景",
        info: "南北朝医药学家，整理《神农本草经》并注释365种药物",
      },
      { name: "王清任", info: "清代解剖学家，著《医林改错》修正古代解剖错误" },
      { name: "叶天士", info: "清代温病学家，创立卫气营血辨证体系" },
      {
        name: "李之藻",
        info: "明代历算家，与利玛窦合译《同文算指》引入西方数学",
      },
      { name: "方以智", info: "明末科学家，著《物理小识》提出“光波动说”" },
      { name: "戴震", info: "清代考据学家，校勘《九章算术》等古籍" },
      { name: "阮元", info: "清代学者，主编《畴人传》首部科学家传记合集" },
      { name: "梅瑴成", info: "清代数学家，主编《数理精蕴》集明清数学大成" },
      { name: "李锐", info: "清代天算家，重新整理《测圆海镜》《益古演段》" },
      {
        "name": "张衡",
        "info": "东汉科学家，发明了地动仪和浑天仪，提出『浑天说』宇宙理论"
    },
    {
        "name": "墨子",
        "info": "先秦时期科学家，在光学、力学领域有杰出贡献"
    },
    {
        "name": "扁鹊",
        "info": "先秦时期名医，中医领域的杰出代表"
    },
    {
        "name": "李冰",
        "info": "先秦时期水利专家，设计了都江堰等水利工程"
    },
    {
        "name": "张仲景",
        "info": "东汉医学家，著有《伤寒杂病论》"
    },
    {
        "name": "华佗",
        "info": "东汉外科医生，擅长外科手术"
    },



    ],
    colorBase: 270, // 颜色基准色相270度（紫色系）
    radiusOffset: 20, // 半径扰动±50px
  },
];

// ================== 优化后的坐标生成 ==================
const createPosition = (baseRadius, angle, radiusOffset, maxAngleNoise) => {
  const rNoise = Math.random() * radiusOffset;
  const aNoise = (Math.random() - 0.5) * 2 * maxAngleNoise;

  return {
    x: (baseRadius + rNoise) * Math.cos(angle + aNoise),
    y: (baseRadius + rNoise) * Math.sin(angle + aNoise),
  };
};

const generateNodes = () => {
  const nodes = [
    {
      id: "center",
      name: "科学家",
      value: "1911年以前中国古代自然科学家",
      x: 0,
      y: 0,
      symbolSize: 65, // 适当减小核心大小
      itemStyle: { color: "#B67271" },
    },
  ];

  layerConfigs.forEach((config, layer) => {
    const angleStep = (Math.PI * 2) / config.names.length;
    const maxAngleNoise = angleStep * 0.4; // 动态角度扰动限制

    config.names.forEach((item, i) => {
      const pos = createPosition(
        config.radius,
        angleStep * i,
        config.radiusOffset,
        maxAngleNoise
      );

      nodes.push({
        id: `node-${layer}-${i}`,
        name: item.name,
        value: item.info, //传递科学家信息 ！重要属性
        ...pos,
        symbolSize:
          layer % 2 == 0 ? Math.random() * 20 + 30 : Math.random() * 20 + 50, // 减小节点大小
        itemStyle: {
          // color: `hsl(${(config.colorBase + i * 15) % 360}, 65%, 60%)`,
          color: colorAll.value[Math.floor(Math.random() * 13)], //每个球的颜色
        },
      });
    });
  });

  return nodes;
};
// ================== 连接线生成 ==================
/**
 * 生成从中心到所有节点的连接线数据
 * @returns {Array<{source: string, target: string}>}
 */
const generateLinks = () => {
  return generateNodes()
    .filter((node) => node.id !== "center") // 过滤掉中心节点
    .map((node) => ({
      source: "center", // 连接起点为中心节点
      target: node.id, // 连接终点为当前节点
    }));
};

// ================== ECharts配置 ==================
const option = ref({
  title: {
    text: "科学家姓名图谱", // 图表标题
    left: 16, // 标题居中
    top: 10,
    textStyle: {
      color: "#2c3e50",
      fontSize: 18,
    },
  },
  tooltip: {
    trigger: "item",
    axisPointer: {
      type: "shadow",
    },
    formatter: function (params) {
      console.log(params);
      // 过滤掉连接线的提示（dataType为'edge'时返回空）
      if (params.dataType === "edge") return null;
      // return `<div
      //           style="
      //             max-width: 100px;
      //             word-break: break-all;
      //             overflow-wrap: break-word;
      //             white-space: normal;
      //             min-width: 0;
      //             line-break: anywhere;
      //           "
      //           >
      //           ${params.value}
      //         </div>`; //鼠标悬浮显示的内容 !重要
      return `
      <div style="max-width: 150px">
                <div style="display: flex; align-items: center">
              
                  <text 
                  style="font-size: 18px; color: #1890ff ;
                    max-width: 100%;
                    word-break: break-all;
                    overflow-wrap: break-word;
                    white-space: normal;
                    min-width: 0;
                    line-break: anywhere;
                  "
                  >${params.name}</text>
                </div>
                <hr style="margin: 5px 0; border-color: #666" />
                <div
                  style="
                    max-width: 100%;
                    word-break: break-all;
                    overflow-wrap: break-word;
                    white-space: normal;
                    min-width: 0;
                    line-break: anywhere;
                  "
                  >
                  ${params.value}
                </div>
            </div>
      `
    },
  },
  series: [
    {
      type: "graph", // 关系图类型
      layout: "none", // 使用自定义坐标布局
      roam: false, // 不允许缩放和平移
      adjacency: true, // 高亮相邻节点
      label: {
        // 节点标签样式
        show: true, // 显示标签
        fontSize: 12, // 字号
        padding: [4, 6], // 文字内边距
        // backgroundColor: 'rgba(0,0,0,0.3)', // 半透明黑色背景
        borderRadius: 3, // 背景圆角
        color: "#fff", // 文字颜色
      },
      edgeSymbol: ["none", "none"], // 连接线两端无箭头
      lineStyle: {
        // 连接线样式
        color: "rgba(0,0,0,0.5)", // 浅灰色
        curveness: 0, // 轻微弯曲
      },
      data: generateNodes(), // 节点数据
      links: generateLinks(), // 连接线数据
      animationDurationUpdate: 1000,
    },
  ],
});
</script>

<style scoped>
/* 科学家页面知识图谱 */
.chart {
  width: 100%;
  height: 100%; /* 占满整个视口高度 */
  /* padding-bottom: 10px; */
  /*  background: linear-gradient(45deg, #f8f9fa, #e9ecef); 浅灰色渐变背景 */
}
</style>
